<template>
  <el-dialog
    :fullscreen="false"
    :title="title"
    width="500px"
    :visible="visible"
    @cancel="handleCancel"
    @close="outerClose"
  >
    <el-form ref="form" label-width="0px" v-loading="tableLoading">
      <el-form-item label="">
        <el-upload
          class="upload-demo"
          action=""
          :before-remove="beforeRemove"
          ref="upload"
          :limit="1"
          :file-list="fileList"
          :on-change="OnChange"
          :auto-upload="false"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传word、PDF、png、jpg文件，且不超过500kb
          </div>
          <div v-if="UN_UPLOAD == true" slot="tip">
            到期时间：
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择添加日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width: 100%"
            >
            </el-date-picker>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import http from '@/utils/http'
export default {
  name: 'InsuranceUpload',
  components: {},
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    insuranceId: {
      type: Number,
      default: () => {},
      required: true,
    },
    _type: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      value1: '',
      tableLoading: false,
      title: '',
      fileList: [],
      UN_UPLOAD: false, // 上传保单
    }
  },
  updated() {
    switch (this._type) {
      case 'UN_UPLOAD_SEAL':
        this.title = '上传盖章投保单'
        this.UN_UPLOAD = false
        break
      case 'UN_UPLOAD':
        this.title = '上传保单'
        this.UN_UPLOAD = true
        break
      case 'SUCCESS':
        this.title = '上传退保批文'
        this.UN_UPLOAD = false
        break
    }
  },
  methods: {
    outerClose() {
      this.value1 = ''
      this.$emit('update:visible', false)
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    beforeRemove(file, fileList) {
      console.log('删除', fileList)
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 提交
    submit() {
      console.log(this.value1)
      if (this.UN_UPLOAD == true && !this.value1) {
        this.$message({
          type: 'warning',
          showClose: true,
          message: '请选择到期时间',
        })
        return
      }

      if (this.fileList.length == 0) {
        this.$message({
          type: 'warning',
          showClose: true,
          message: '请选择文件',
        })
        return
      }
      var newFile = new FormData()
      this.fileList.forEach((item, index) => {
        console.log('index:', index)
        newFile.append('file', item.raw)
        newFile.append('id', this.insuranceId)
        newFile.append('status', this._type)
      })
      if (this.UN_UPLOAD == true) {
        newFile.append('expirationTime', this.value1)
      }
      this.tableLoading = true

      http
        .request({
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          method: 'post',
          url: '/station-insurance/manager/uploadInsurance',
          data: newFile,
        })
        .then((res) => {
          console.log(res)
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.$emit('refresh')
          this.$emit('update:visible', false)
          this.fileList = []
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            type: 'warning',
            showClose: true,
            message: err,
          })
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    OnChange(file, fileList) {
      console.log('OnChange-fileList', file, fileList)
      this.fileList = fileList
    },
  },
}
</script>
<style scoped>
.uploadtip {
  font-weight: bold;
  line-height: 34px;
  font-size: 16px;
  color: rgb(235, 71, 71);
}
</style>
